<!--
 * @Descripttion: 空数据组件
    - 父元素需要添加相对定位
 * @version: 
 * @Author: Billy
 * @Date: 2021-06-30 15:35:13
 * @LastEditors: hejiajun
 * @LastEditTime: 2021-09-28 15:14:31
-->
<template>
  <div class="lw-empty-wrap">
    <div class="empty-wrap" v-if="!loading">
      <div class="ant-empty-image" v-if="iconShow">
        <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(0 1)" fill="none" fillRule="evenodd">
            <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse>
            <g fillRule="nonzero" stroke="#D9D9D9">
              <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
              <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path>
            </g>
          </g>
        </svg>
      </div>
      <p class="ant-empty-description" v-text="text"></p>
    </div>

    <LoadingOutlined class="LoadingOutlined" v-if="loading" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { LoadingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  props: {
    loading: {
      type: Boolean,
      default: false,
      des: '为true时,empty隐藏',
    },
    iconShow: {
      type: Boolean,
      default: true,
    },
    text: {
      type: String,
      default: '暂无相关数据',
    },
  },
  components: { LoadingOutlined },
});
</script>
<style lang="less" scoped>
.lw-empty-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: #062539 !important;
  z-index: 999;
  .ant-empty-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ant-empty-description {
    margin-left: -5px;
    color: rgba(229, 229, 229, 0.8);
    font-size: 18px;
  }

  .LoadingOutlined {
    font-size: 42px;
    z-index: 50;
    color: #fff;
  }
}
</style>
